<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useUserStore } from '@/stores/user'

import { recordDetailApi, type itemType, type cardType } from '@/api/info'
import { ElMessage } from 'element-plus'

import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'

const route = useRoute()

const loading = ref(false)

const fail = ref(false)
const detail = reactive({
  title: '',
  des: '',
  payMethod: '',
  time: '',
  orderId: '',
  items: ''
})
function getData() {
  loading.value = true
  fail.value = false
  recordDetailApi({
    id: route.query.id as string
  })
    .then((res) => {
      loading.value = false
      if (res.status != 200) {
        ElMessage.error(res.message)
        fail.value = true
        return
      }
      fail.value = false
      const { data } = res

      detail.orderId = data._id
      detail.time = dayjs(data.create_time).format('YYYY年MM月DD日 HH:mm:ss')
      switch (data.type) {
        case 0:
        case 1:
          detail.title = '充值' + data.recharge.toFixed(2) + '元'
          if (data.give > 0) {
            detail.des = '赠送' + data.give.toFixed(2) + '元,余额' + data.remain.toFixed(2) + '元'
          } else {
            detail.des = '余额' + data.remain.toFixed(2) + '元'
          }
          detail.payMethod = data.payMethod
          break
        case 2:
          detail.title = '消费' + data.consume.toFixed(2) + '元'
          detail.des = '余额' + data.remain.toFixed(2) + '元'
          detail.payMethod = '会员余额'
          detail.items = itemsToStr(data.items) ?? ''
          break
        case 4:
        case 5:
          detail.title = '充值' + data.recharge.toFixed(2) + '元'
          detail.des = cardsToStr(JSON.parse(data.cards))
          detail.payMethod = data.payMethod
          break
        case 6:
          let card = JSON.parse(data.cards)[0]
          detail.title = '使用' + card.value + '次' + card.name + '卡'
          detail.des = '剩余' + data.remain + '次'
          detail.payMethod = '会员次卡'
          break
        case 7:
          detail.title = '消费' + data.consume.toFixed(2) + '元'
          detail.items = itemsToStr(data.items) ?? ''
          detail.payMethod = data.payMethod
          break
      }

      loading.value = false
    })
    .catch((error) => {
      ElMessage.error(error.message)
      loading.value = false
      fail.value = true
    })
}
function cardsToStr(cards: cardType[]) {
  if (!cards || cards.length <= 0) {
    return '无'
  }
  let str = []
  for (var card of cards) {
    str.push(card.value + '次' + card.name)
  }
  return str.join('、')
}
function itemsToStr(items: itemType[]) {
  if (!items || items.length <= 0) {
    return
  }
  let str = []
  for (var item of items) {
    if (item.itemName) {
      str.push(item.itemName + 'x' + item.count)
    }
  }
  if (str.length <= 0) {
    return
  }
  return str.join('，')
}
getData()
</script>

<template>
  <div>
    <div v-if="fail">
      <el-empty description="信息获取失败">
        <div>
          <div class="btn_error">
            <el-button class="btn" type="primary" @click="getData">重试</el-button>
          </div>
        </div>
      </el-empty>
    </div>
    <div class="container">
      <div class="head_container">
        <div class="header_title">{{ detail.title }}</div>
        <div v-if="detail.des" class="header_des">{{ detail.des }}</div>
      </div>

      <div class="detail_container">
        <div class="detail_line">
          交易方式
          <span class="highlight">{{ detail.payMethod }}</span>
        </div>
        <div class="detail_line" v-if="detail.items">
          消费项目
          <span class="highlight">{{ detail.items }}</span>
        </div>
        <div class="detail_line">
          交易时间
          <span class="highlight">{{ detail.time }}</span>
        </div>
        <div class="detail_line">
          交易单号
          <span class="highlight">{{ detail.orderId }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.btn_error {
  width: 200px;
  margin-bottom: 20px;
}
.btn {
  width: 100%;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.head_container {
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 26px;
  font-weight: bold;
  color: #333333;
}

.header_title {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header_des {
  font-size: 18px;
  font-weight: normal;
  color: #333333;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail_container {
  margin-top: 4px;
  padding-top: 24px;
  font-size: 16px;
  color: #999999;
}

.highlight {
  color: #333333;
  margin-left: 15px;
}

.detail_line {
  margin-top: 8px;
}
</style>
